<template>
  <div style="height: 100%;width: 100%">
    <div class="goods-pic">
      <div class="goods-banner">
        <div class="back">
          <img src="../../../static/icon/shop-detail/Path.png" alt="path" @click="back">
        </div>
        <div class="collect">
          <img src="../../../static/icon/shop-detail/Star.png" alt="">
        </div>
        <div class="transpond">
          <img src="../../../static/icon/shop-detail/transpond.png" >
        </div>
        <div class="more-pic" @click="morepic">
          <span>查看更多图片</span>
        </div>
      </div>
    </div>
    <div class="goods-tit">
      <span class="goods-name">软装中华香烟</span>
      <span class="goods-price">单盒参考价<span class="money">￥88</span></span>
    </div>
    <group class="tab" id="group1">
      <tab bar-active-color="#AD2532" :line-width="2" custom-bar-width="1.43rem" active-color="#AD2532" default-color="#9B9B9B" :scroll-threshold="7" >
        <tab-item selected  active-class="active1" @click.native="change1">商品</tab-item>
        <tab-item active-class="active1" @click.native="change2">参数</tab-item>
        <tab-item active-class="active1" @click.native="change3">报价</tab-item>
        <tab-item active-class="active1" @click.native="change4">口碑</tab-item>
        <tab-item active-class="active1" @click.native="change5">问答</tab-item>
        <tab-item active-class="active1" @click.native="change6">测评</tab-item>
        <tab-item active-class="active1" @click.native="change7">商家</tab-item>
      </tab>
    </group>
    <group id="group2">
      <cell>
        <span slot="title" class="parameter">基本参数</span>
      </cell>
      <cell-box>
        <div  class="parameter-detail">
          <div class="detail-list">
            <div class="parameter-name">烟气烟碱量</div><div class="data">1mg</div>
          </div>
          <div class="detail-list">
            <span class="parameter-name">烟长</span><span class="data">84mm</span>
          </div>
          <div class="detail-list">
            <span class="parameter-name">包装形式</span><span class="data">条形软盒</span>
          </div>
          <div class="detail-list">
            <span class="parameter-name">销售形式</span><span class="data">国内内销</span>
          </div>
          <div class="detail-list">
            <span class="parameter-name">批发价格</span><span class="data">30元/盒</span>
          </div>
          <div class="detail-list">
            <span class="parameter-name">烟气co量</span><span class="data">12mg</span>
          </div>
          <div class="detail-list">
            <span class="parameter-name">过滤嘴长</span><span class="data">11mm</span>
          </div>
          <div class="detail-list">
            <span class="parameter-name">单盒（包）支数</span><span class="data">20支</span>
          </div>
          <div class="detail-list">
            <span class="parameter-name">零售状态</span><span class="data">在售</span>
          </div>
          <div class="detail-list">
            <span class="parameter-name">零售价</span><span class="data">30元/盒</span>
          </div>
          <div class="detail-list">
            <span class="parameter-name">小盒条形码</span><span class="data">11111111111</span>
          </div>
          <div class="detail-list">
            <span class="parameter-name">条盒条形码</span><span class="data">11111111</span>
          </div>
        </div>
      </cell-box>
    </group>
    <group id="group3">
      <cell>
        <span slot="title" class="parameter">商品参考价</span>
      </cell>
      <cell-box>
        <div class="price">
          <div class="reference"><div class="reference-price">单盒参考价格</div><div class="reference-money">￥88</div></div>
          <div class="reference"><div class="reference-price">条盒参考价格</div><div class="reference-money">￥1000</div></div>
        </div>
      </cell-box>
    </group>
    <group id="group4">
      <div class="score">
          <cell is-link>
            <span slot="title" class="parameter">口碑</span>
            <span slot="default" class="right">137条点评</span>
          </cell>
        <cell-box>
          <div class="overall-score">
            <img src="../../../static/icon/shop-detail/paihangbang.png" alt="">
            <span class="asset">综合评价：<span class="score-num">85</span>分</span>
          </div>
        </cell-box>
      </div>
    </group>
    <group id="group5">
      <cell is-link>
        <span slot="title" class="parameter">问答</span>
        <span slot="default" class="right">更多</span>
      </cell>
      <cell-box>
        <div class="ask">
          <div class="question">
            <div class="inquire">问</div>
            <div class="answer">
              <span class="describe">贵吗？</span>
              <span class="answer-num">2回答</span>
            </div>
          </div>
          <div class="question">
            <div class="inquire">问</div>
            <div class="answer">
              <span class="describe">贵吗？</span>
              <span class="answer-num">2回答</span>
            </div>
          </div>
        </div>
      </cell-box>
    </group>
    <group id="group6">
      <cell is-link>
        <span slot="title" class="parameter">测评</span>
        <span slot="default" class="right">更多</span>
      </cell>
      <cell-box>
        <div class="test">
          <img src="../../../static/icon/shop-detail/timg.jpg" alt="">
          <div class="test-info">
            <span class="test-tit">
              烟民强烈推荐TOP10！&nbsp;你的口粮上榜了吗？
            </span>
              <span class="test-time">16小时前<span class="test-comment">50条评论</span></span>
          </div>
        </div>
      </cell-box>
    </group>
    <group id="group7">
      <cell>
        <span slot="title" class="parameter">附近商家</span>
      </cell>
      <cell-box>
        <flexbox>
          <flexbox-item><div class="shop"><img src="../../../static/icon/shop-detail/timg.jpg" alt=""><span>王小二烟铺</span></div></flexbox-item>
          <flexbox-item><div class="shop"><img src="../../../static/icon/shop-detail/timg.jpg" alt=""><span>王小二烟铺</span></div></flexbox-item>
          <flexbox-item><div class="shop"><img src="../../../static/icon/shop-detail/timg.jpg" alt=""><span>王小二烟铺</span></div></flexbox-item>
        </flexbox>
      </cell-box>
    </group>
    <group>
      <cell is-link>
        <span slot="title" class="parameter">论坛</span>
        <span slot="default" class="right">进入论坛</span>
      </cell>
    </group>
  </div>
</template>

<script>
  import { Flexbox, FlexboxItem } from 'vux'
    export default {
        name: "goods-detail",
      methods:{
        back(){
          this.$router.go(-1)
        },
        change7(){
          document.querySelector('#group7').scrollIntoView(true);
        },
        change6(){
          document.querySelector('#group6').scrollIntoView(true);
        },
        change5(){
          document.querySelector('#group5').scrollIntoView(true);
        },
        change4(){
          document.querySelector('#group4').scrollIntoView(true);
        },
        change3(){
          document.querySelector('#group3').scrollIntoView(true);
        },
        change2(){
          document.querySelector('#group2').scrollIntoView(true);
        },
        change1(){
          document.querySelector('#group1').scrollIntoView(true);
        },
        morepic(){
          this.$router.push({
            name:'morepic'
          })
        }
      },
      components: {
        Flexbox,
        FlexboxItem
      }
    }
</script>

<style scoped>
  .goods-pic{
    width: 100%;
    height: 19.64rem;
    background-image: url("../../../static/icon/shop-detail/timg.jpg");
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
  }
  .goods-banner{
    width: 100%;
    display: flex;
    flex-direction: row;
    margin-top: 2.21rem;
  }
  .back{
    width: 2.5rem;
    height: 2.5rem;
    background: rgba(0,0,0,0.30);
    border-radius: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.64rem;
  }
  .back img{
    width: 0.86rem;
    height: 1.5rem;
  }
  .collect{
    width: 2.5rem;
    height: 2.5rem;
    position: absolute;
    background: rgba(0,0,0,0.30);
    border-radius: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 74.7%;
    margin-right: 0.71rem;
  }
  .collect img{
    width: 1.4rem;
    height: 1.3rem;
  }
  .transpond{
    width: 2.5rem;
    height: 2.5rem;
    position: absolute;
    background: rgba(0,0,0,0.30);
    border-radius: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 86.7%;
  }
  .transpond img{
    width: 1.14rem;
    height: 1.14rem;
  }
  .more-pic{
    width: 6.43rem;
    height: 1.79rem;
    border-radius: 0.89rem;
    position: absolute;
    background: rgba(0,0,0,0.40);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 72%;
    margin-top: 14.5rem;
  }
  .more-pic span{
    font-size: 12px;
    color: #FFFFFF;
    letter-spacing: 0;
  }
  .goods-tit{
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
  }
  .goods-name{
    font-size: 14px;
    color: #4A4A4A;
    letter-spacing: -0.34px;
    margin-left: 1.07rem;
    margin-top: 1rem;
    font-weight: bolder;
  }
  .goods-price{
    font-size: 14px;
    color: #9B9B9B;
    letter-spacing: 0;
    text-align: justify;
    margin-left: 1.07rem;
    margin-top: 0.86rem;
    padding-bottom: 1.07rem;
  }
  .money{
    font-size: 17px;
    color: #AD2532;
    letter-spacing: 0;
    text-align: justify;
    margin-left: 0.36rem;
  }
  .active1{
    font-weight: bolder;
  }
  .tab{
    background: #FFFFFF;
    box-shadow: 0 2px 4px 0 rgba(173,37,50,0.05), 0 4px 8px 0 rgba(173,37,50,0.02);
  }
  .parameter{
    font-size: 14px;
    color: #4A4A4A;
    letter-spacing: 0;
    text-align: justify;
  }
  .parameter-detail{
    display: flex;
    flex-direction: column;
  }
  .detail-list{
    margin-top: 0.72rem;
    display: flex;
    flex-direction: row;
  }
  .parameter-name{
    width: 9.93rem;
    font-size: 14px;
    color: #9B9B9B;
    letter-spacing: 0;
  }
  .data{
    font-size: 14px;
    color: #4A4A4A;
    letter-spacing: 0;
    text-align: justify;
    /*margin-left: 5.72rem;*/
  }
  .price{
    display: flex;
    flex-direction: column;
  }
  .reference{
    display: flex;
    flex-direction: row;
    padding-bottom: 0.86rem;
  }
  .reference-price{
    font-size: 14px;
    color: #9B9B9B;
    letter-spacing: -0.34px;
    text-align: justify;
  }
  .reference-money{
    position: absolute;
    right: 5%;
    font-size: 17px;
    color: #AD2532;
    letter-spacing: 0;
    text-align: justify;
  }
  .right{
    font-size: 14px;
    color: #4A4A4A;
    letter-spacing: 0;
    text-align: justify;
  }
  .overall-score{
    display: flex;
    flex-direction: row;
  }
  .overall-score img{
    width: 4.29rem;
    height: 4.07rem;
    margin-left: 6.5rem;
  }
  .asset{
    font-size: 14px;
    color: #4A4A4A;
    letter-spacing: 0;
    text-align: justify;
    margin-left: 0.71rem;
    margin-top: 0.71rem;
  }
  .score-num{
    font-size: 24px;
    color: #AD2532;
    letter-spacing: 0;
    text-align: justify;
    margin-left: 0.36rem;
  }
  .ask{
    display: flex;
    flex-direction: column;
  }
  .question{
    display: flex;
    flex-direction: row;
  }
  .inquire{
    width: 1.43rem;
    height: 1.43rem;
    background: #AD2532;
    border-radius: 0.36rem;
    font-size: 12px;
    color: #FFFFFF;
    letter-spacing: 0;
    text-align: center;
  }
  .answer{
    display: flex;
    flex-direction: column;
    margin-left: 0.72rem;
  }
  .describe{
    font-size: 14px;
    color: #4A4A4A;
    letter-spacing: 0;
    text-align: justify;
  }
  .answer-num{
    margin-top: 0.36rem;
    padding-bottom: 0.36rem;
    font-size: 12px;
    color: #9B9B9B;
    letter-spacing: 0;
    text-align: justify;
  }
  .test{
    display: flex;
    flex-direction: row;
  }
  .test img{
    width: 7.86rem;
    height: 5.71rem;
  }
  .test-info{
    margin-left: 1.07rem;
    display: flex;
    flex-direction: column;
  }
  .test-tit{
    font-size: 18px;
    color: #030303;
    letter-spacing: -0.43px;
    text-align: justify;
  }
  .test-time{
    margin-top: 0.71rem;
    font-size: 12px;
    color: #9B9B9B;
    letter-spacing: -0.29px;
    text-align: justify;
  }
  .test-comment{
    margin-left: 1.07rem;
  }
  .shop{
    display: flex;
    flex-direction: column;
    margin-left: 1.07rem;
  }
  .shop img{
    width: 6.43rem;
    height: 6.43rem;
  }
  .shop span{
    margin-left: 0.72rem;
    margin-top: 0.72rem;
    font-size: 14px;
    color: #4A4A4A;
    letter-spacing: 0;
    text-align: justify;
  }
</style>
